<template>
    <div class="o2o-store-screen" @click="default_handle_click">
        <c-title :text="title"></c-title>
        <div class="p">项目</div>
        <div class="table-box">
            <div class="table-box-item">
                <div class="head">
                    <div class="head-left">项目</div>
                    <div class="head-right">金额/数值</div>
                </div>
                <div v-for="(item, index) in list" style="position: relative;"
                    :class="[current_item_index === index ? 'element' : '', item.is_class && !item.price ? 'project-class' : '']">
                    <div class="line"></div>
                    <div class="bottom">
                        <div class="bottom-left" @click.stop="handle_click(index)">
                            <div>{{ item.name }}</div>
                            <i
                                :class="show_tips && current_index == index ? 'iconfont icon-course_up' : 'iconfont icon-course_down'"></i>
                        </div>
                        <div class="bottom-right">
                            <input type="number" v-model="list[index].price" style="text-align: right;" />
                            <span class="unit">{{ item.unit_name }}</span>
                        </div>
                        <i v-if="index >= 1" @click="handle_delete(index)" class="iconfont icon-fontclass-shanchu"></i>
                    </div>
                    <div class="search-options" :class="leave_class ? 'leave' : ''"
                        v-if="show_tips && current_index == index">
                        <main class="overflow-y-scroll">
                        <div v-for="c_item in tips_list" @click.stop="choose(c_item, index)"
                            @touchstart="startTouch($event)" @touchend="endTouch($event)"
                             style="position: relative;z-index: 10;">{{ c_item.name }}</div>
                            </main>
                        </div>
                </div>
                <div v-if="!id" class="tips-box">
                    <i class="iconfont icon-icon_add"></i>
                    <div class="tips" @click="handle_add">添加项目</div>
                </div>
            </div>

        </div>




        <div class="footer" :class="{ 'w375': fun.isPc() }">
            <button class="order" @click="submit"><i v-if="!id" class="iconfont icon-icon_add"></i>{{ title }}</button>
        </div>


    </div>
</template>

<script>
export default {
    data() {
        return {
            title: "",
            project_name: '选择项目',
            show_tips: false,
            show: false,
            id: "",
            list: [{ name: "", price: '', project_id: "", is_class: true, unit_name: "",special_sign:0 }],
            tips_list: [],
            current_index: "",
            current_item_index: "",
            leave_class: false,
        };
    },
    activated() {
        this.init();
        this.get_project_data();
    },

    methods: {
        default_handle_click(event){
            const dropdown = document.querySelector('.search-options');
            if (dropdown && !dropdown.contains(event.target)) {
                this.show_tips = false;
            }
        },
        async get_project_data() {
            let { result, msg, data } = await $http.post("plugin.store-screen.frontend.controllers.cost.index.get-project-list");
            if (result) {
                this.tips_list = data;
            } else {
                this.$toast(msg)
            }
        },
        async submit() {
            let id = this.$route.params.store_id || '';

            let json = {
                data: this.list.map(item => {
                    let _json = {
                        price:item.price,
                        project_id:item.project_id,
                        special_sign:item.special_sign
                    }
                    if(item.id){
                        _json.id = item.id;
                    }
                    return _json;
                })
            };
            if (id) {
                json.store_id = id;
            }

            let { result, msg } = await $http.post("plugin.store-screen.frontend.controllers.cost.index.save", json, '.');
            this.$toast(msg);
            if (result) {
                this.$router.back();
            }

        },
        handle_add() {
            this.list.push({ name: "", price: '', project_id: "", is_class: true, unit_name: "",special_sign:0 });
            setTimeout(() => {
                this.list[this.list.length - 1].is_class = false;
            }, 1000);
        },
        startTouch(event) {
            event.target.style.backgroundColor = '#F5F5F5';
        },
        endTouch(event) {
            event.target.style.backgroundColor = 'white';
        }, handle_click(index) {
            this.current_index = index;
            if (!this.show_tips) {
                this.show_tips = true;
                this.leave_class = false;
            } else {
                this.leave_class = true;
                setTimeout(() => {
                    this.show_tips = false;
                }, 500);
            }
        },

        init() {
            this.leave_class = false;
            this.list = [{ name: "", price: '', project_id: "", unit_name: "" ,special_sign:0}];
            this.show = false;
            if (this.$route.params.id) {
                this.fun.setWXTitle('编辑成本');
                this.id = this.$route.params.id;
                this.title = '编辑成本'
            } else {
                this.title = '添加成本';
                this.fun.setWXTitle('添加成本');
            }
            this.$route.params.id && this.getDetails();

        },
        async getDetails() {
            let { result, msg, data } = await $http.post("plugin.store-screen.frontend.controllers.cost.index.details", { id: this.$route.params.id, store_id: this.$route.params.store_id }, '.')
            if (result) {
                this.list = [{ name: data.project_name, price: data.real_price, project_id: data.project_id, id: data.id, unit_name: data.project.unit_name,special_sign:data.project.special_sign }];

            } else {
                this.$toast(msg);
            }
        },
        handle_delete(index) {
            this.$dialog.confirm({
                title: '提示',
                message: '删除后无法恢复，确认删除吗？',
            })
                .then(() => {
                    this.current_item_index = index;
                    setTimeout(() => {
                        this.current_item_index = '';
                        this.list.splice(index, 1);
                    }, 1000);
                })
                .catch(() => { });
        },
        choose(data, index) {
            this.list[index].name = data.name;
            this.list[index].project_id = data.id;
            this.list[index].unit_name = data.unit_name;
            this.list[index].special_sign =data.special_sign;
            if (!this.show_tips) {
                this.show_tips = true;
                this.leave_class = false;
            } else {
                this.leave_class = true;
                setTimeout(() => {
                    this.show_tips = false;
                }, 500);
            }
        },
        cancel() {
            this.show = false;
        },
    }
};
</script>

<style scoped lang='scss'>
.overflow-y-scroll{
    max-height: 8.125rem;
    overflow-y: scroll;
}
.arrow {
    border: 20px solid transparent;
    position: absolute;
    top: -1.125rem;
    left: .625rem;
    border-bottom-color: #050505;
    display: inherit;

    &::after {
        position: absolute;
        content: "";
        border-style: solid;
        border-width: 0 0 0 0;
        left: 0;
        top: 0;
        z-index: -1;
        box-shadow: -2px 1px 9px 2px grey;
    }
}

.o2o-store-screen .project-class {
    animation: fadeInProject 1s forwards;
    z-index: 1;
    /* animation-iteration-count: 1 !important; */
}

@keyframes fadeInProject {
    from {
        /* 动画开始时 */
        /* opacity: 0; */
        transform: translateX(-100px);
        /* 向右移动100px */
        visibility: hidden;
    }

    to {
        /* 动画结束时 */
        /* opacity: 1;  */
        transform: translateX(0);
        /* 向右移动100px */
        /* display: none; */
        visibility: unset;
    }
}

/* 定义淡出动画 */
@keyframes fadeOut {
    from {
        /* 动画开始时 */
        opacity: 1;
        /* 完全不透明 */
    }

    to {
        /* 动画结束时 */
        opacity: 0;
        /* 完全透明 */
        transform: translateX(100px);
        /* 向右移动100px */
        visibility: hidden;
        /* display: none; */
    }
}


/* 应用动画 */
.element {
    animation: fadeOut 1s forwards !important;
    /* 动画名称，持续时间，填充模式 */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        left: 0;
        bottom: 0;
        z-index: -1;
        transform: translateY(80%);

    }

    to {
        opacity: 1;
        left: .75rem;
        bottom: -0.95rem;
        z-index: 10;
        transform: translateY(100%);
        box-shadow: 1px 1px 6px 3px #ccc;
    }
}

@keyframes fadeOutTips {
    from {
        opacity: 1;
        left: .75rem;
        bottom: -0.95rem;
        z-index: 10;
        transform: translateY(100%);
        box-shadow: 1px 1px 6px 3px #ccc;

    }

    to {
        opacity: 0;
        left: 0;
        bottom: 0;
        z-index: -1;
        transform: translateY(80%);
    }
}

.leave {
    animation: fadeOutTips 0.5s forwards !important;
}

.search-options {
    position: absolute;
    animation: fadeIn 0.5s forwards;
    background-color: #fff;
    border-radius: .5rem;
    min-width: 40%;
    text-align: left;
    padding: .75rem 0;
    box-sizing: border-box;
    z-index: 10;

    &::before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: -7px;
        left: 20px;
        background: #fff;
        border: 8px solid transparent;
        border-top-color: #fff;
        border-right-color: #fff;
        transform: rotate(135deg);
        z-index: 5;
        box-shadow: 1px 0px 2px 2px #ccc;
    }

    &::after {
        content: "";
        width: 80px;
        height: 40px;
        position: absolute;
        top: 0;
        left: 10px;
        z-index: 5;
        background: #fff;
    }

    div:first-child {
        border-radius: .5rem .5rem 0 0;

    }

    div {
        line-height: 2rem;
        margin: 0 0.75rem;
    }

    div:last-child {
        border-bottom: unset;
        border-radius: 0 0 .5rem .5rem;
    }

}

::v-deep .el-input__inner {
    border: 0;
    color: #00001C;
    padding: 0;
}

::v-deep .el-select .el-input .el-select__caret {
    color: #999;
}

::v-deep .el-input__inner::-webkit-input-placeholder {
    color: #00001C;
}

::v-deep .el-select {
    display: block;
    width: 100%;
}

.o2o-store-screen {
    min-height: 100vh;

    .icon-icon_add {
        margin-right: .3125rem;
        color: #F15353;
        font-size: 0.65rem;
    }

    .tips-box {
        display: flex;
        align-items: center;
        margin-top: .875rem;
    }

    .tips {
        font-weight: 400;
        font-size: .875rem;
        color: #F15353;
        text-align: left;
    }

    .head-right {
        text-align: left !important;
        padding-left: 3rem;
    }

    .head-left,
    .head-right {
        // flex: 1;
        width: 50%;
        text-align: center;
        font-weight: 400;
        font-size: .875rem;
        color: #00001C;
        line-height: 1;
    }

    .line {
        margin: .9375rem 0 .75rem;
        background-color: #F0F0F1;
        height: 1px;
    }

    .head,
    .bottom {
        display: flex;
        align-items: center;
        line-height: 1;
    }

    .table-box-item {
        position: relative;
        background: #FFFFFF;
        border-radius: .5rem;
        padding: 1rem .75rem .75rem;
        margin-bottom: .75rem;
    }

    .p {
        font-weight: 500;
        font-size: .875rem;
        color: #00001C;
        line-height: 1;
        text-align: left;
        margin: .875rem .75rem .625rem .75rem;
    }

    .table-box {
        padding: 0 .75rem 9.0625rem;

    }

    .icon-fontclass-shanchu {
        // margin-left: .75rem;
        color: #999999;
        font-size: 1rem;
    }

    .icon-fontclass-xiugai {
        color: #999999;
        font-size: .8rem;

    }

    .bottom-left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 9.8438rem;
        height: 2.25rem;
        background-color: #F5F5F5;
        color: #00001C;
        border-radius: .375rem .375rem .375rem .375rem;
        padding-left: .625rem;
        padding-right: .5313rem;

        div {
            word-wrap: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .unit {
        font-weight: 400;
        font-size: .875rem;
        color: #6E6E79;
        flex-shrink: 0;
        margin-left: .625rem;
    }

    input {
        flex: 1;
        border: none;
        width: 0;
    }

    .bottom-right {
        display: flex;
        align-items: center;
        margin-left: .75rem;
        padding: 0 .9375rem;
        width: 8.4375rem;
        height: 2.25rem;
        background-color: #F5F5F5;
        margin-right: .3125rem;
        border-radius: .375rem .375rem .375rem .375rem;
    }

    .table-item {

        background: #FFFFFF;
        border-radius: .5rem;
        padding: .875rem .75rem .9375rem;
        margin-bottom: .625rem;


    }

    .table-item-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .left {
        font-weight: 500;
        font-size: .9375rem;
        color: #00001C;
        line-height: 1;
    }

    .table-item-bottom {
        font-weight: 400;
        font-size: .8125rem;
        line-height: 1;
        text-align: left;
        margin-top: .875rem;
        color: #6E6E79;
    }

    div {
        box-sizing: border-box;
    }

    .icon-course_down,
    .icon-course_up {
        // transform: rotate(180deg);
        color: #999999;
        font-size: .625rem;
        font-weight: bold;
    }

    .change-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .625rem .75rem;
    }

    .change-item {
        position: relative;
        font-weight: 400;
        font-size: .8125rem;
        color: #00001C;
        line-height: 1;
        height: 2.25rem;
        width: 10.6563rem;
        background: #FFFFFF;
        border-radius: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 .75rem;
    }

    .footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #FFFFFF;
        box-shadow: 0px -1px 10px 1px #F5F5F5;
        display: flex;
        padding: .625rem .75rem;

        .icon-icon_add {
            margin-right: .375rem;
            color: #fff;
            font-size: .625rem;
            line-height: 1;
            font-weight: bold;
        }
    }

    .order {
        width: 100%;
        height: 2.5rem;
        border-radius: 1.2813rem 1.2813rem 1.2813rem 1.2813rem;
        border: .0313rem solid #F15353;
        font-weight: 500;
        font-size: .9375rem;
        color: #fff;
        background-color: #F15353;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .w375 {
        width: 375px;
        position: fixed;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}
</style>